
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YZH</title>

</head>

<body>
    <!-- span 跟 div一样用 span行标签(不独占一行),div块级元素-->
    <!-- <div class="box">abc</div>
    <div id = "id">aa</div>
    <h3>
        <span>
            
            请输入:
            <input type="text">
        </span> 
    </h3> 
    <img src="何雨.jpg" width="100px">
    -->
    <!-- <input type="txet">
    <button>隐藏密码</button>    -->

    <!--<div style="font-size: 20px; font-size: 20px; height: 100px;" id="one">DIV</div> -->
    <!-- <style>
        .light{
            /* 日间模式 */
            color: black;
            background-color: white;
        }
        .night{
            /* 夜间模式 */
            color: white;
            background-color: #000;
        }
    </style> -->

    <div class="one">AAA</div>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
    <script>
        //末尾添加元素
        // let input = document.createElement('input');
        // input.value = 'hello';
        // let div = document.querySelector('.one');
        // div.appendChild(input);
        // console.log(div.value);
        let ul = document.querySelector("ul");
        for(let i = 3; i < 10; i++){
            let li = document.createElement('li');
            li.innerHTML = i ;
            ul.appendChild(li);
        }
        //删除
        let B = document.querySelectorAll('li')[2];

        // let toDelete = document.querySelectorAll('li');
        // let B = toDelete[2];

        console.log(B);
        
        ul.removeChild(B);

        
        // //切换模式
        // let div = document.querySelector('#one');
        // div.onclick = function(){
        //     if(div.className == 'night'){
        //         div.className = 'light'; 
        //     }else{
        //         div.className = 'night';
        //     }
        // }
        


        // //调整字体大小
        // let div = document.querySelector('div');
        // div.onclick = function(){
        //     //获取字体大小
        //     console.log(div.style.fontSize);
        //     let fontSize = parseInt(div.style.fontSize);
        //     fontSize += 10;
        //     div.style.fontSize = fontSize+'px';
        // }



        // //隐藏密码

        // let button = document.querySelector('button');
        // let input = document.querySelector('input');
        // button.onclick = function() {
            
        //     if(input.type == 'text'){
        //         input.type = 'password';
        //         button.innerHTML = '显示密码';
        //     }else{
        //         input.type = 'text';
        //         button.innerHTML = '隐藏密码';
        //     }
        // }


        // //输入信息
        // let button = document.querySelector('button');
        // let input = document.querySelector('input');
        // button.onclick = function() {
        //     //console.log(input.value);
        //     //console.log(input.innerHTML);    //innerHTML得到标签的内容,input是单标签,没有内容
        //     let value = parseInt(input.value); //value获取的值是一个string类型的需要强转成数字
        //     value += 1;
        //     input.value = value;
        // }
        
        // let img = document.querySelector('img');
        // img.onclick = function(){
        //     console.log("替换");
        //     img.src = "美女.jpg";
        // }
        // console.dir(img); //显示该元素属性

        // let elem1 = document.querySelector('.box');  //获取.box对象
        // console.dir(elem1); //console.dir()获取对象的属性

        // let elem2 = document.querySelector('#id');
        // console.dir(elem2);

        // let elem3 = document.querySelector('h3>span>input');
        // console.dir(elem3); 

        // let div = document.querySelector('.box');
        // div.onclick = function() {
        //     // alert('hello!');
        //     console.log(div.innerHTML); 
        //     //使用innerHTML属性拿到元素内容,如果对该属性修改,会影响到界面的显示(会影响两标签之间的内容)
        //     div.innerHTML += 'A';
        // }
    </script>
    
</body>

</html>